<script setup lang="ts">
import Choose from './choose.vue'
import Encryption from './encryption.vue'
import Attack from './attack.vue'
import Decrypt from './decrypt.vue'
import { Check, CloseBold } from '@element-plus/icons-vue'

const currentName = ref('热门转换')
const name = ref({
  '1': '热门转换',
  '2': '在线编码',
  '3': '图片攻击',
  '4': '在线解密',
})
// const choose = ref(1)
const activeName = ref('1')

watch(activeName, (newQuestion: any, oldQuestion: any) => {
  console.log('watch', oldQuestion)
  currentName.value = name.value[newQuestion]
})

const change = (e: any) => {
  activeName.value = e
  console.log('activeName', activeName)
}
// const select = (e: any) => {
//   activeName = e
// }
</script>

<template>
  <el-container>
    <el-header class="head">
    </el-header>
<!--    <el-header class="head">-->
<!--      <div class="top-nav">-->
<!--        &lt;!&ndash; 左侧 &ndash;&gt;-->
<!--        <div class="t-left">-->
<!--          <a href="#">-->
<!--            <img src="../../assets/logo.png" alt="" class="nav-logo" />-->
<!--            <span>研电赛</span>-->
<!--          </a>-->
<!--        </div>-->
<!--        &lt;!&ndash; 右侧 &ndash;&gt;-->
<!--        <div class="t-right">-->
<!--          <ul>-->
<!--            <li>-->
<!--              <div class="nav-tab">-->
<!--                <el-icon>-->
<!--                  <Check />-->
<!--                </el-icon>-->
<!--                我的我的-->
<!--              </div>-->
<!--            </li>-->
<!--            <li>-->
<!--              <div class="nav-tab">滚动页面</div>-->
<!--            </li>-->
<!--            <li>-->
<!--              <div class="nav-tab">跳转链接</div>-->
<!--              <ul class="nav-menu">-->
<!--                <li>百度一下</li>-->
<!--                <li>淘宝</li>-->
<!--                <li>京东</li>-->
<!--                <li>鹰角网络</li>-->
<!--              </ul>-->
<!--            </li>-->
<!--            <li>-->
<!--              <div class="nav-tab">关注我吧</div>-->
<!--              <ul class="nav-menu">-->
<!--                <li>CSDN</li>-->
<!--                <li>知乎</li>-->
<!--                <li>简书</li>-->
<!--                <li>哔哩哔哩</li>-->
<!--              </ul>-->
<!--            </li>-->
<!--            &lt;!&ndash; <li @click="goToConsole">-->
<!--                <div class="nav-tab">控制台</div>-->
<!--              </li> &ndash;&gt;-->
<!--            <div class="console">-->
<!--              <div class="btn">控制台</div>-->
<!--            </div>-->
<!--          </ul>-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-header>-->
    <el-main class="content" :style="{ padding: '0 50px' }">
      <div class="mdui-text-center">
        <h1>{{ currentName }}</h1>
      </div>
      <div class="cc">
        <Choose v-if="activeName === '1'" @change="change"></Choose>
        <Encryption v-else-if="activeName === '2'" class="choose"></Encryption>
        <Attack v-else-if="activeName === '3'" class="choose"></Attack>
        <Decrypt v-else-if="activeName === '4'" class="choose"></Decrypt>
      </div>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.head {
  margin-bottom: 10px;
  padding: 0px;
}
/* 顶部导航栏 开始 */
.top-nav {
  width: 100%;
  transition: all 0.3s;
  //box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
  color: #222226;
  background: #fff;
  height: 100%;
}

.t-left {
  float: left;

  a {
    height: 60px;
    line-height: 60px;
    display: inline-block;
    position: relative;
    .nav-logo {
      position: absolute;
      width: 200px;
      height: 32px;
      top: 24px;
      left: 20px;
    }
    span {
      font-size: 16px;
      margin-left: 62px;
    }
  }
}

.t-right {
  float: right;
  margin-right: 20px;
  text-align: center;

  ul {
    li {
      float: left;
      width: 120px;
      cursor: pointer;
      position: relative;

      .nav-tab {
        width: 104px;
        margin: 0 auto;
        text-align: center;
        font-size: 16px;
        line-height: 60px;
        font-weight: 400;
      }
      .nav-menu {
        position: absolute;
        z-index: 9999;
        width: 120px;
        //height: 0px;
        //float: left;
        //background: red;
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
        border-radius: 0 0 2px 2px;
        overflow: hidden; // 让li的内容隐藏
        display: none;
        li {
          margin-left: 8px;
          width: 104px;
          height: 55px;
          color: #222226;
          border-bottom: 1px solid #eeeeee;
          font-size: 14px;
          line-height: 55px;
          text-align: center;
          font-weight: 400;
        }

        li:hover {
          color: #2271f7;
        }
      }
    }

    li:hover {
      .nav-tab {
        border-bottom: 4px solid #1890ff;
        color: #2271f7;
      }

      .nav-menu {
        //transition: all 0.3s; // 鼠标移出时menu瞬间消失，故将transition加在hover里
        height: 220px; // 使menu从上往下平滑弹出
        display: block;
      }
    }
    // 控制台
    .console {
      width: 104px;
      height: 60px;
      float: left;
      margin: 0 8px;
      position: relative;
      border-bottom: 4px solid transparent;
      cursor: pointer;

      .btn {
        margin-top: 2px;
        background: #2271f7;
        width: 91px;
        height: 35px;
        line-height: 35px;
        // padding-left: 24px;
        font-size: 15px;
        color: #fff;
        border-radius: 8px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .console:hover {
      border-bottom: 4px solid #1890ff;
    }
  }
}

.top-nav:hover {
  background-color: #ffffff;
  box-shadow: 0 3px 8px 0 rgba(32, 42, 70, 0.07);

  .t-left a span {
    color: #34364e;
  }

  .t-right {
    .nav-tab {
      color: #34364e;
    }

    .nav-menu li {
      background: #ffffff;
    }
  }
}

.layout {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100%;
}

.mdui-text-center {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}

.mdui-text-center h1 {
  font-weight: 300;
  font-size: 46px;
}

.layout-logo {
  width: 150px;
  height: 50px;
}

.layout-nav {
  width: 500px;
  margin: 0 20px 0 auto;
}

.content {
  background-color: #fff;
  height: calc(100vh - 120px);
}

.choose {
  width: 60%;
  //display: flex;
  margin: 0 auto;
}

</style>
